<template>
	<div class="rf-member-info">
		<ul>
			<li>直推总人数：{{state.total}}</li>
			<li>团队总人数：{{state.groupTotal}}</li>
			<li>团队消费总额：{{state.groupMoney || 0}}</li>
			<li>直推会员消费总额：{{state.directGroupMoney || 0}}</li>
		</ul>
	</div>
	<view class="navbar">
		<view class="nav-item">ID</view>
		<view class="nav-item">头像</view>
		<view class="nav-item">昵称</view>
		<view class="nav-item">团队累计</view>
	</view>
    <!--会员-->
    <view v-if="state.memberCenterList.length > 0" >
      <view
        v-for="(item, index) in state.memberCenterList"
        :key="index"
		class="navbar"
      >
          <view class="nav-item">{{ item.id }}</view>
          <view class="nav-item">
			  <rf-image
			    :src="item.head_portrait"
			    border-radius="6"
			    height="80"
			    width="80"
			  />
		</view>
		  <view class="nav-item">{{item.nickname}}</view>	
		  <view class="nav-item">{{item.eachGroupMoney || 0}}</view>
      </view>
	
     <rf-load-more
        v-if="state.memberCenterList.length > 0"
        :status="state.loadingType"
        class="load-more"
      />
    </view>
    <rf-empty
      v-if="state.memberCenterList.length === 0 && !state.loading"
      info="暂无会员记录"
    />
    <!--加载动画-->
    <rf-loading :active="state.loading" />
</template>
<script lang="ts" setup>
import {onLoad, onPullDownRefresh, onReachBottom,} from "@dcloudio/uni-app";
import {formatToDateTime,} from "@/utils/dateUtil";
import {reactive,} from "vue";
import mHelper from "@/utils/helper";
import memberApi from "@/api/tinyShop/member";
import {memberCenter,} from "@/response/profile";


let state = reactive({
  memberCenterList: [] as memberCenter[],
  tabCurrentIndex: 1,
  page: 1,
  loadingType: "more",
  isStop: false,
  startTime: 0 as number,
  endTime: 0 as number,
  loading: true,
  theIndex: -1,
  oldIndex: -1,
  initXY: [] as number[],
  total:0 as number,
  groupTotal:0 as number,
  groupMoney:0 as number,
  eachGroupMoney:0 as number,
});

// 下拉刷新
onPullDownRefresh(() => {
  state.loading = true;
  state.page = 1;
  state.memberCenterList = [];
  getMemberCenterList("refresh");
});
// 加载更多
onReachBottom(() => {
  if (state.loadingType === "noMore") return;
  state.page++;
  getMemberCenterList();
});
onLoad((options) => {
  initData(options);
});

const time = (val: string) => {
  return formatToDateTime(Number(val) * 1000, "YYYY-MM-DD HH:mm:ss");
};
const numFilter = (val: string) => {
  return parseInt(val) >= 0 ? `+${val}` : val;
};
// 数据初始化
const initData = (options) => {
	getMemberCenterList();
};
// 获取会员信息
const getMemberCenterList = async (type = "") => {
  const params: AnyObject = {};
  //params.type = 1;
  //if (state.tabCurrentIndex) params.num_type = state.tabCurrentIndex;
  params.page = state.page;
  try {
    const data = await memberApi.getMemberCenterList(params) as unknown as memberCenter[];
    state.loading = false;
    if (type === "refresh") {
      uni.stopPullDownRefresh();
    }
    state.loadingType = data.memberList.length < 10 ? "noMore" : "more";
    state.memberCenterList = [...state.memberCenterList, ...data.memberList,];
	state.total = data.total
	state.groupTotal = data.groupTotal
	state.directGroupMoney = data.directGroupMoney
	state.groupMoney = data.groupMoney
  } catch (e) {
    state.loading = false;
    if (type === "refresh") {
      uni.stopPullDownRefresh();
    }
  }
};
</script>
<style lang="scss" scoped>
.rf-member-info {
  background-color: $page-color-base;
  padding: $page-row-spacing;
  width: 100%;
  height: 100%;
  font-size:14px;
}
</style>
